<template>
  <a-modal
    v-model="show"
    :centered="true"
    :keyboard="false"
    :footer="null"
    :width="750"
    @cancel="onClose"
    :visible="reconSceneInfoInputVisiable"
  >

    <a-form :form="firstForm">
      <a-row>
        <a-col :span="8" class="firstColAdd"> 对账系统标识<span style="color: red">*</span></a-col>
        <a-col :span="9">
          <a-form-item style="display: none">
            <a-input type="hidden" name="id" v-decorator="['id']"/>
          </a-form-item>
          <a-form-item style="display: none">
            <a-input type="hidden" name="instId" v-decorator="['instId']"/>
          </a-form-item>
          <a-form-item style="display: none">
            <a-input type="hidden" name="curIndex" v-decorator="['curIndex']"/>
          </a-form-item>
          <a-form-item style="display: none">
            <a-input type="hidden" name="optFlag" v-decorator="['optFlag']"/>
          </a-form-item>
          <a-form-item style="display: none">
            <a-input type="hidden" name="reconSysStatId" v-decorator="['reconSysStatId']"/>
          </a-form-item>
          <a-form-item>
            <a-input name="reconSysId"
                     v-decorator="['reconSysId' , {rules: [{required: true,max: 64, pattern: /^[A-Za-z0-9]+$/, message: '请输入对账系统标识，数字或字母，最多64个字符'}]} ]"/>
          </a-form-item>
        </a-col>
        <a-col :span="6"/>
      </a-row>
      <a-row>
        <a-col :span="8" class="firstColAdd"> 对账关联系统描述<span style="color: red">*</span></a-col>
        <a-col :span="9">
          <a-form-item>
            <a-input name="reconSysSceneDesc"
                     v-decorator="['reconSysSceneDesc' , {rules: [{required: true,max: 64, message: '请输入对账关联系统描述,最多64个字符'}]} ]"/>
          </a-form-item>
        </a-col>
        <a-col :span="6"/>
      </a-row>
      <a-row>
        <a-col :span="8" class="firstColAdd"> 对账文件日期<span style="color: red">*</span></a-col>
        <a-col :span="9">
          <a-form-item>
            <!-- <a-input name="reconFileDate"
                      v-decorator="['reconFileDate' , {rules: [{required: true, message: '请输入对账文件日期'}]} ]"/>-->
            <a-date-picker
              placeholder="请选择日期"
              name="reconFileDate"
              v-decorator="['reconFileDate' , {rules: [{required: true, message: '请输入对账文件日期'}]} ]"
              format="YYYYMMDD"/>
          </a-form-item>
        </a-col>
        <a-col :span="6"/>
      </a-row>
      <a-row>
        <a-col :span="8" class="firstColAdd"> 对账文件状态<span style="color: red">*</span></a-col>
        <a-col :span="9">
          <a-form-item>
            <a-select name="reconFileStatus"
                      v-decorator="['reconFileStatus' ,{rules: [{required: true, message: '请输入对账文件状态'}]} ]">
              <a-select-option value="0">就绪</a-select-option>
              <a-select-option value="1">运行中</a-select-option>
              <a-select-option value="2">运行中有新文件</a-select-option>
              <a-select-option value="3">运行完成</a-select-option>
              <a-select-option value="4">运行完成有遗留数据</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6"/>
      </a-row>
      <a-row>
        <a-col :span="8" class="firstColAdd"> 系统日期类型<span style="color: red">*</span></a-col>
        <a-col :span="9">
          <a-form-item>
            <a-input name="sysDateType"
                     v-decorator="['sysDateType' , {rules: [{required: true,max: 64, message: '请输入系统日期类型,最多64个字符'}]} ]"/>
          </a-form-item>
        </a-col>
        <a-col :span="6"/>
      </a-row>
      <a-row>
        <a-col :span="8" class="firstColAdd"> 系统日并发基数<span style="color: red">*</span></a-col>
        <a-col :span="9">
          <a-form-item>
            <a-input name="taskNum"
                     v-decorator="['taskNum' , {rules: [{required: true,max: 2, pattern: /^\d{1,2}$/, message: '请输入系统日并发基数(数字)，最多2个字符'}]} ]"/>
          </a-form-item>
        </a-col>
        <a-col :span="6"/>
      </a-row>
      <a-row>
        <a-col :span="8" class="firstColAdd"> 最晚到达时间(格式:HHmm)<span style="color: red">*</span></a-col>
        <a-col :span="9">
          <a-form-item>
            <!--<a-input name="lastArrivedTime" maxlength="64"
                     v-decorator="['lastArrivedTime' , {rules: [{required: true, message: '请输入系统日最晚到达时间(格式:HHMM)'}]} ]"/>-->
            <a-time-picker name="lastArrivedTime"
                           placeholder="请选择时间"
                           v-decorator="['lastArrivedTime' , {rules: [{required: true, message: '请输入系统日最晚到达时间(格式:HHmm)'}]} ]"
                           format="HHmm"/>
          </a-form-item>
        </a-col>
        <a-col :span="6"/>
      </a-row>

      <a-row>
        <a-col :span="8" class="firstColAdd"/>
        <a-col :span="9">
          <a-button @click="submitForm" type="primary">提交</a-button>
          <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
            <a-button style="margin-right: .8rem">取消</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
  import moment from "moment";
  import reconPath from '../reconPath/ReconPath'

  moment.locale('zh-cn');
  export default {
    name: 'ReconSceneInfoInput',
    props: {
      reconSceneInfoInputVisiable: {
        require: true,
        default: false
      }
    },
    data() {
      return {
        instId : null,
        reconSceneInfo: {},
        firstForm: this.$form.createForm(this),

      }
    },
    computed: {
      show: {
        get: function () {
          return this.reconSceneInfoInputVisiable
        },
        set: function () {
        }
      }
    },

    methods: {
      setFormValues(record, curIndex, optFlag) {
        this.instId = record.instId;
        if (optFlag == "add") {
          this.firstForm.getFieldDecorator('id');
          this.firstForm.setFieldsValue({'id': ""});
          this.firstForm.getFieldDecorator('reconSysStatId');
          this.firstForm.setFieldsValue({'reconSysStatId': ""});
          this.firstForm.getFieldDecorator('reconSysId');
          this.firstForm.setFieldsValue({'reconSysId': ""});
          this.firstForm.getFieldDecorator('reconSysSceneDesc');
          this.firstForm.setFieldsValue({'reconSysSceneDesc': ""});
          this.firstForm.getFieldDecorator('reconFileDate');
          this.firstForm.setFieldsValue({'reconFileDate': ""});
          this.firstForm.getFieldDecorator('reconFileStatus');
          this.firstForm.setFieldsValue({'reconFileStatus': ""});
          this.firstForm.getFieldDecorator('sysDateType');
          this.firstForm.setFieldsValue({'sysDateType': ""});
          this.firstForm.getFieldDecorator('taskNum');
          this.firstForm.setFieldsValue({'taskNum': ""});
          this.firstForm.getFieldDecorator('lastArrivedTime');
          this.firstForm.setFieldsValue({'lastArrivedTime': ""});
        } else {
          this.firstForm.getFieldDecorator('id');
          this.firstForm.setFieldsValue({'id': record.id});
          this.firstForm.getFieldDecorator('reconSysStatId');
          this.firstForm.setFieldsValue({'reconSysStatId': record.reconSysStatId});
          this.firstForm.getFieldDecorator('reconSysId');
          this.firstForm.setFieldsValue({'reconSysId': record.reconSysId});
          this.firstForm.getFieldDecorator('reconSysSceneDesc');
          this.firstForm.setFieldsValue({'reconSysSceneDesc': record.reconSysSceneDesc});
          this.firstForm.getFieldDecorator('reconFileDate');
          this.firstForm.setFieldsValue({'reconFileDate': moment(record.reconFileDate)});
          this.firstForm.getFieldDecorator('reconFileStatus');
          this.firstForm.setFieldsValue({'reconFileStatus': record.reconFileStatus});
          this.firstForm.getFieldDecorator('sysDateType');
          this.firstForm.setFieldsValue({'sysDateType': record.sysDateType});
          this.firstForm.getFieldDecorator('taskNum');
          this.firstForm.setFieldsValue({'taskNum': record.taskNum});
          this.firstForm.getFieldDecorator('lastArrivedTime');
          this.firstForm.setFieldsValue({'lastArrivedTime': moment(record.lastArrivedTime, "HHmm")});
        }
        this.firstForm.getFieldDecorator('instId');
        this.firstForm.setFieldsValue({'instId': record.instId});
        this.firstForm.getFieldDecorator('curIndex');
        this.firstForm.setFieldsValue({'curIndex': curIndex});
        this.firstForm.getFieldDecorator('optFlag');
        this.firstForm.setFieldsValue({'optFlag': optFlag});

      },
      onClose() {
        this.firstForm.resetFields()
        this.$emit('close')
      },
      submitForm() {
        this.firstForm.validateFields((err, values) => {
          if (!err) {
            values.reconFileDate = moment(values.reconFileDate).format('YYYYMMDD');
            values.lastArrivedTime = moment(values.lastArrivedTime).format('HHmm');
            this.firstForm.resetFields();
              this.$emit('success', values);
          }
        })
      },
    },

  }
</script>
<style>

</style>
